{% extends "base.html" %}

{% block content %}
<div class="container mt-3">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('index') }}">首页</a></li>
            <li class="breadcrumb-item"><a href="{{ url_for('repo_detail', username=owner.username, repo_name=repo.name) }}">{{ repo.name }}</a></li>
            <li class="breadcrumb-item active">{{ file.name }}</li>
        </ol>
    </nav>

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2>
            <span>{{ file.name }}</span>
            <span class="badge bg-secondary ms-2">
                {{ '目录' if file.is_directory else '文件' }}
            </span>
        </h2>
        <a href="{{ url_for('repo_detail', username=owner.username, repo_name=repo.name) }}" class="btn btn-sm btn-outline-secondary">
            返回仓库
        </a>
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <a class="nav-link active" href="#">内容</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">历史</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            {% if file.is_directory %}
                <div class="alert alert-info">
                    这是一个目录
                </div>
            {% else %}
                <pre><code>{{ file.content }}</code></pre>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
pre {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
    max-height: 500px;
    overflow-y: auto;
}
</style>
{% endblock %}
